<template>
  <div class="home">
    <h1>首页</h1>
    <div>
      <button v-if="!isLogin" @click="login()">登录</button>
      <button v-else @click="logout()">注销</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      isLogin: false
    }
  },
  mounted() {
    this.isLogin = this.checkLogin()
    console.log(this.isLogin)
  },
  methods: {
    checkLogin() {
      return localStorage.getItem('isLogin') === 'true'
    },
    login() {
      localStorage.setItem('isLogin', 'true')
      this.isLogin = true
    },
    logout() {
      localStorage.removeItem('isLogin')
      this.isLogin = false
    }
  }
}
</script>

<style scoped>
.home {
  text-align: center;
}
</style>
